<template>
  <el-table border
            :show-header="false"
            size="mini"
            ref="goodsTable"
            highlight-current-row
            :data="records">
    <template v-for="(column, index) in columns">
      <!-- (index===2)&&(column.prop==='weight'||column.prop==='volume'||column.prop==='value') -->
      <el-table-column :key="index"
                       :prop="column.prop"
                       :label="column.name"
                       :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-input v-if="
              scope.row.goodsName === '调整' &&
              (index === 1 || index === 2 || index === 4)
            "
                    v-model="scope.row[column.prop]"
                    @blur="change(scope.row[column.prop], column.prop)"
                    oninput="this.value=(this.value.match(/\d{0,10}(\.\d{0,2})?/)||[''])[0];" />
          <span v-else>{{ scope.row[column.prop] }} </span>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>
<script>
export default {
  name: "GoodsTotal",
  data () {
    return {
      isShow: false,
      keyIndex: 0,
      columns: [
        { name: "物品名称", prop: "goodsName" },
        { name: "重量", prop: "weight" },
        { name: "体积", prop: "volume" },
        { name: "数量", prop: "quantity" },
        { name: "总价值", prop: "value" },
        { name: "批次", prop: "batchNo" },
        { name: "备注", prop: "desc" }
      ],
      total: 0,
      pageSizeOptions: [10, 20, 50, 100],
      pageNo: 1,
      pageSize: 10,
      records: []
    };
  },
  props: {
    totalData: {
      type: Object,
      default: () => { }
    }
  },
  created () {
    this.records = [
      {
        goodsName: "合计",
        quantity: this.totalData.totalQuantity,
        value: this.totalData.totalValue,
        weight: this.totalData.totalWeight,
        volume: this.totalData.totalVolume
      },
      {
        goodsName: "补差",
        weight: this.totalData.weightAddition,
        volume: this.totalData.volumeAddition,
        value: this.totalData.valueAddition
      },
      {
        goodsName: "调整",
        weight: this.totalData.calculateWeight,
        volume: this.totalData.calculateVolume,
        value: this.totalData.calculateValue,
      }
    ];
  },
  methods: {
    change (value, name) {
      if (name === "weight") {
        this.records[1].weight = (
          value ? value - this.records[0].weight : this.totalData.weightAddition
        ).toFixed(2);
      }
      if (name === "volume") {
        this.records[1].volume = (
          value ? value - this.records[0].volume : this.totalData.volumeAddition
        ).toFixed(2);
      }
      if (name === "value") {
        this.records[1].value = (
          value ? value - this.records[0].value : this.totalData.valueAddition
        ).toFixed(2);
      }
      let obj = {
        totalValue:
          Number(this.records[2]?.value) === 0 ? 0 : Number(this.records[2]?.value) || this.totalData.totalValue,
        totalWeight:
          Number(this.records[2]?.weight) === 0 ? 0 : Number(this.records[2]?.weight) || this.totalData.totalWeight,
        totalVolume:
          Number(this.records[2]?.volume) === 0 ? 0 : Number(this.records[2]?.volume) || this.totalData.totalVolume,
        calculateValue:
          Number(this.records[2]?.value) === 0 ? 0 : Number(this.records[2]?.value) || this.totalData.totalValue,
        calculateWeight:
          Number(this.records[2]?.weight) === 0 ? 0 : Number(this.records[2]?.weight) || this.totalData.totalWeight,
        calculateVolume:
          Number(this.records[2]?.volume) === 0 ? 0 : Number(this.records[2]?.volume) || this.totalData.totalVolume,
      };
      this.$emit("input", obj, this.records[1]);
    }
  }
};
</script>
